<!--
 * @Description: 地图资源一张图
 * @Author: JiangMing
 * @Date: 2021-09-10 10:21:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-10 12:21:00
-->
<template>
  <view class="page page-detail-content">
    <map
      id="map"
      ref="map"
      class="map-view"
      :longitude="center.longitude"
      :latitude="center.latitude"
      :markers="markers"
      :circles="circles"
      :show-location="true"
      @tap="mapClick"
      @markertap="markerClick"
    >
      <!-- 搜索栏 -->
      <cover-view v-if="showType == 'search'" class="search-cover">
        <MapSearch ref="mapSearch" :center="center" @change="searchChange" />
      </cover-view>
      <!-- 确定位置 -->
      <cover-view v-if="showType == 'search'" class="footer">
        <button v-if="currentPoi.title" class="btn-primary" @click="showViewport">确定位置</button>
      </cover-view>
      <!-- 影响范围 -->
      <cover-view v-if="showType == 'viewport'" class="viewport-cover">
        <view class="viewport-info">
          <view class="header">事发地点</view>
          <view class="title">{{ currentPoi.title }}</view>
          <view class="info">
            <text>设置范围半径（m）</text>
            <uni-number-box v-model="radius" :min="500" :max="99999" :step="10"></uni-number-box>
          </view>
          <button class="btn-primary" @click="showDataSource">选择资源</button>
        </view>
      </cover-view>
      <!-- 资源详情 -->
      <cover-view v-if="showType == 'resourceDetail'" class="details-cover">
        <view class="details-info">
          <view class="header">{{ currentResouorce.name }}</view>
          <view class="info">
            <view class="info-item">
              <label class="info-item__label">地址</label>
              <view class="info-item__content">{{ currentResouorce.address }}</view>
            </view>
            <view class="info-item">
              <label class="info-item__label">描述</label>
              <view class="info-item__content">{{ currentResouorce.remark }}</view>
            </view>
            <view class="info-item">
              <label class="info-item__label">负责人</label>
              <view class="info-item__content">{{ currentResouorce.manager }}</view>
            </view>
          </view>
          <view class="handle">
            <button class="btn-primary-plain" @click="showViewport">返回</button>
            <button class="btn-primary">导航</button>
          </view>
        </view>
      </cover-view>
      <!-- 资源目录 -->
      <cover-view v-if="showType == 'resourceTree'" class="dataSource-cover">
        <view class="dataSource-info">
          <SearchBar v-model="classKeyword" ref="searchBar" />
          <view class="dataSource-list">
            <Tree :data="dataSourceTree" nodeKey="id" nodeLabel="name" @check-change="treeCheck" />
          </view>
          <view class="handle">
            <button class="btn-primary-plain" @click="showViewport">返回</button>
            <button class="btn-primary" @click="resourcePoints">确定</button>
          </view>
        </view>
      </cover-view>
    </map>
  </view>
</template>

<script>
import MapSearch from '@/components/mapSearch';
import SearchBar from '@/components/searchBar';
import Tree from '@/components/tree';
import { dataSourceTree } from './mock';

export default {
  components: {
    MapSearch,
    SearchBar,
    Tree
  },
  data() {
    return {
      position: {},
      positionMarker: {
        id: 'my-position',
        iconPath: '../../static/images/position.png',
        width: 32,
        height: 32,
        anchor: { x:.5, y:.5 }
      },
      radius: 500,
      currentPoi: {},
      currentResouorce: {
        name: '类型-物资仓库',
        address: '广州市黄埔区xxx街xx号',
        manager: '张三',
        remark: '面积 500km2，容纳1000人，面积 500km2，容纳1000人，面积 500km2，容纳1000人',
      },
      showType: 'search', // search、viewport、resourceDetail、resourceTree
      classKeyword: '',
      dataSourceTree,
      icons: {
        'yunshu': require('@/static/images/yunshu.png'),
        'changshuo': require('@/static/images/changshuo.png'),
        'jigou': require('@/static/images/jigou.png'),
        'zhuanjia': require('@/static/images/zhuanjia.png'),
        'team': require('@/static/images/duiwu.png'),
        'wuzi': require('@/static/images/wuzi.png')
      },
      points: {}
    }
  },
  onLoad(options) {
    this.getLocation();

    // #ifdef APP-NVUE
    this.eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
    // #endif
    // #ifndef APP-NVUE
    this.eventChannel = this.getOpenerEventChannel();
    // #endif
  },
  onReady() {
    this.mapCtx = uni.createMapContext('map', this);
  },
  computed: {
    center() {
      let location = this.currentPoi.location;
      if (location) {
        return {
          longitude: location.lng,
          latitude: location.lat
        }
      } else {
        return this.position;
      }
    },
    markers() {
      let markers = [];
      // markers = [{
      //   ...this.position,
      //   ...this.positionMarker
      // }];
      let location = this.currentPoi.location;
      if (location) {
        markers.push({
          id: 'poi',
          longitude: location.lng,
          latitude: location.lat,
          iconPath: '../../static/images/location.png',
          width: 32,
          height: 32,
          anchor: { x:.5, y:1 }
        })
      }
      let pointsKeys = Object.keys(this.points);
      if (pointsKeys.length) {
        pointsKeys.forEach(k => {
          let list = this.points[k];
          list.forEach(t => {
            markers.push({
              id: k,
              longitude: t.longitude,
              latitude: t.latitude,
              iconPath: this.icons[t.type],
              width: 32,
              height: 32,
              anchor: { x:.5, y:.5 }
            })
          })
        })
      }
      console.log(markers)
      return markers;
    },
    circles() {
      let circles = [];
      let location = this.currentPoi.location;
      if (location) {
        circles.push({
          longitude: location.lng,
          latitude: location.lat,
          radius: this.radius,
          strokeWidth: 1,
          color: '#FFFFFF',
          fillColor: '#027AFF33'
        })
      }
      return circles;
    }
  },
  methods: {
    // 获取当前定位
    getLocation() {
      const _this = this;
      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          _this.position = {
            longitude: res.longitude,
            latitude: res.latitude
          }
          console.log('当前位置：', res);
        }
      });
    },
    mapClick(e) {
      if (!e.detail.x) {
        this.$refs.mapSearch && this.$refs.mapSearch.searchBlur();
      }
    },
    markerClick(e) {
      this.showType = 'resourceDetail'
    },
    searchChange(data) {
      this.currentPoi = data;
    },
    treeCheck(row, checked) {
      console.log(row, checked)
    },
    resourcePoints() {
      this.points = {
        'a101': [
          { type: 'wuzi', ...this.randomLatLng() },
          { type: 'wuzi', ...this.randomLatLng() },
          { type: 'wuzi', ...this.randomLatLng() },
        ],
        'b101': [
          { type: 'team', ...this.randomLatLng() },
          { type: 'team', ...this.randomLatLng() },
          { type: 'team', ...this.randomLatLng() },
        ],
        'c101': [
          { type: 'zhuanjia', ...this.randomLatLng() },
          { type: 'zhuanjia', ...this.randomLatLng() },
          { type: 'zhuanjia', ...this.randomLatLng() },
        ],
        'd101': [
          { type: 'jigou', ...this.randomLatLng() },
          { type: 'jigou', ...this.randomLatLng() },
          { type: 'jigou', ...this.randomLatLng() },
        ],
        'e101': [
          { type: 'changshuo', ...this.randomLatLng() },
          { type: 'changshuo', ...this.randomLatLng() },
          { type: 'changshuo', ...this.randomLatLng() },
        ],
        'f101': [
          { type: 'yunshu', ...this.randomLatLng() },
          { type: 'yunshu', ...this.randomLatLng() },
          { type: 'yunshu', ...this.randomLatLng() },
        ]
      }
      this.showType = 'viewport'
    },
    showViewport() {
      this.showType = 'viewport';
    },
    showDataSource() {
      this.showType = 'resourceTree';
    },
    // 生成随机地图经纬度
    randomLatLng() {
      let lat = 23.12 + (Math.random() / 100);
      let lng = 113.36 + (Math.random() / 100);
      lat = lat.toFixed(6);
      lng = lng.toFixed(6);

      return { longitude: lng, latitude: lat }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .map-view {
    height: 100%;
    width: 100%;
  }
  .search-cover {
    overflow: visible;
    padding: 20rpx 30rpx;
  }
  .footer {
    position: absolute;
    bottom: 30rpx;
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
  }
  .viewport-cover,
  .details-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background-color: #FFF;
    border-radius: 16rpx 16rpx 0 0;
    box-shadow: 0px -5px 10px rgba(44, 121, 247, 0.2);
  }
  .viewport-info {
    padding: 20rpx 32rpx;
    font-size: 28rpx;
    color: rgba(85, 85, 85, .8);
    .header {
      line-height: 48rpx;
      margin-bottom: 10rpx;
    }
    .title {
      color: #1D1F24;
      line-height: 40rpx;
      margin-bottom: 20rpx;
    }
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
    }
  }
  .details-info {
    padding: 32rpx;
    font-size: 28rpx;
    .header {
      font-size: 30rpx;
      color: #2B2B2B;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .info {
      margin-bottom: 40rpx;
      color: #1d1f24;
    }
    .info-item {
      display: flex;
      padding: 30rpx 0;
      border-bottom: 1px solid #eee;
      line-height: 36rpx;
      .info-item__label {
        width: 160rpx;
        color: rgba(85, 85, 85, .8)
      }
      .info-item__content {
        flex: 1;
        width: calc(100% - 160rpx);
        white-space: break-spaces;
      }
    }
    .handle {
      display: flex;
      justify-content: space-between;
      > button {
        width: 280rpx;
        margin: 0;
      }
    }
  }
  .dataSource-cover {
    height: 100%;
    background-color: #FFF;
    .dataSource-info {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .dataSource-list {
      flex: 1;
      overflow-y: auto;
      padding: 30rpx;
    }
    .handle {
      display: flex;
      justify-content: space-between;
      box-shadow: 0px -5px 10px rgba(44, 121, 247, 0.2);
      padding: 32rpx;
      > button {
        width: 280rpx;
        margin: 0;
      }
    }
  }
}
</style>